<template>
  <div>
    <div @click="showFormula = true" class="c-ph24 c-hh64 c-flex-row c-aligni-center tax-bg">
      <span class="iconfont c-fs26 c-fc-xmlred">&#xe8a4;</span>
      <span class="c-fs20 c-fc-xmlred c-ml18 c-w0 c-flex-grow1">查看税额计算公式</span>
      <div class="iconfont c-fs24 c-fc-xmlred">&#xe635;</div>
    </div>
    <template v-if="taxList && taxList.length">
      <div v-for="(item, index) in taxList" :key="index" class="c-ph24 c-pv30 c-bd-b12">
        <div class="c-fs32 c-fc-xblack c-fw600">{{ item.date }}</div>
        <div class="c-flex-row c-aligni-center c-mt20">
          <div class="c-fs24 c-fc-sblack c-w0 c-flex-grow1">自动到账收入 (元) ：{{ item.amount }}</div>
          <div @click="goWithdrawDetail(item.date)" class="c-fs22 c-fc-white c-ww136 c-hh48 c-flex-row c-flex-center theme-bg c-br24">查看明细</div>
        </div>
        <div class="c-fs24 c-fc-sblack c-mt10">预计税收 (元) ：{{ item.invoiceAmount }}</div>
        <div @click="clickUpload(item, index)" class="c-fs24 theme-fc c-text-decoration-underline c-mt20">{{item.invoiceNum > 0 ? '查看发票' : '上传发票'}}</div>
      </div>
    </template>
    <cj-popup v-model="showUploadInvoice" round position="bottom" class="c-p" :closeable="true">
      <template v-slot:header>
        <div class="popup-slot-header">
          <span v-if="editStatus == 2 && isEdit == false" @click="isEdit = true" class="edit theme-fc">编辑</span>
          <div class="tit">上传发票</div>
        </div>
      </template>
      <div class="c-pt40 c-ph24 c-bg-sgray c-pb144 c-minh480">
        <div class="c-flex-row c-flexw-wrap">
          <div v-for="(item, index) in invoiceList" :key="index" class="c-ww184 c-hh184 c-p img-item c-mb20">
            <img :src="$addXossFilter(item.invoiceUrl, require('@/assets/defult270.png'))" class="c-w100 c-h c-br8" />
            <div v-if="showDeleteBtn" @click="deleteInvoiceItem(index)" class="c-pa iconfont c-p-t0 c-p-r0 c-fs36 c-fc-gray c-brp50 c-bg-white">&#xe757;</div>
          </div>
          <div v-if="showUploadBtn" @click="tapUpload" class="c-ww184 c-hh184 c-bg-white c-flex-column c-flex-center c-br8 img-item c-mb20">
            <div class="theme-fc c-fs48 c-rotate45 iconfont">&#xe757;</div>
            <div class="c-fs24 c-fc-gray c-mt20">上传发票</div>
          </div>
        </div>
        <div @click="goInvoiceRule" class="c-fs24 theme-fc"><span class="c-fs20 c-text-decoration-underline">查看发票规则</span><span class="c-fs18 iconfont c-pl4">&#xe635;</span></div>
      </div>
      <div class="c-w100 c-pa c-p-b0 c-p-l0 c-hh88 c-bg-white c-flex-row c-flex-center c-ph30">
        <div v-if="editStatus == 1" @click="toUpload" class="c-fs22 c-fc-white theme-bg c-flex-row c-flex-center c-flex-grow1 c-hh64 c-br32">上传</div>
        <div v-if="editStatus == 2 && !isEdit" @click="toClose" class="c-fs22 c-fc-white theme-bg c-flex-row c-flex-center c-flex-grow1 c-hh64 c-br32">我知道了</div>
        <div v-if="editStatus == 2 && isEdit" @click="toSave" class="c-fs22 c-fc-white theme-bg c-flex-row c-flex-center c-flex-grow1 c-hh64 c-br32">确定</div>
      </div>
    </cj-popup>
    <cj-popup v-model="showFormula" round position="bottom" class="c-p" :closeable="true" :title="'税额计算公式'">
      <div class="c-pt40 c-pb180 c-ph24 c-bg-sgray">
        <div class="c-fs24 c-fc-xblack c-fw600">个人所得税预扣率表<span class="c-fs20 c-fc-gray">（居民个人劳务报酬所得预扣缴适用）</span></div>
        <div class="c-bg-white c-br12 c-text-hidden c-mt20">
          <div class="c-flex-row theme-bg-20">
            <div class="c-ww100 c-fs22 c-fc-xblack c-bd-r1-f6 c-hh72 c-flex-row c-flex-center">级数</div>
            <div class="c-w0 c-flex-grow1 c-fs22 c-fc-xblack c-bd-r1-f6 c-hh72 c-flex-row c-flex-center">预扣预缴应纳所得额</div>
            <div class="c-ww100 c-fs22 c-fc-xblack c-hh72 c-flex-row c-flex-center">预扣率</div>
          </div>
          <div class="c-flex-row c-bd-b1-f6">
            <div class="c-ww100 c-fs22 c-fc-xblack c-bd-r1-f6 c-hh72 c-flex-row c-flex-center">1</div>
            <div class="c-w0 c-flex-grow1 c-fs22 c-fc-xblack c-bd-r1-f6 c-hh72 c-flex-row c-flex-center">不超过20000元</div>
            <div class="c-ww100 c-fs22 c-fc-xblack c-hh72 c-flex-row c-flex-center">20%</div>
          </div>
          <div class="c-flex-row c-bd-b1-f6">
            <div class="c-ww100 c-fs22 c-fc-xblack c-bd-r1-f6 c-hh72 c-flex-row c-flex-center">2</div>
            <div class="c-w0 c-flex-grow1 c-fs22 c-fc-xblack c-bd-r1-f6 c-hh72 c-flex-row c-flex-center">超过20000元至50000元的部分</div>
            <div class="c-ww100 c-fs22 c-fc-xblack c-hh72 c-flex-row c-flex-center">30%</div>
          </div>
          <div class="c-flex-row">
            <div class="c-ww100 c-fs22 c-fc-xblack c-bd-r1-f6 c-hh72 c-flex-row c-flex-center">3</div>
            <div class="c-w0 c-flex-grow1 c-fs22 c-fc-xblack c-bd-r1-f6 c-hh72 c-flex-row c-flex-center">超过50000元的部分</div>
            <div class="c-ww100 c-fs22 c-fc-xblack c-hh72 c-flex-row c-flex-center">40%</div>
          </div>
        </div>
        <div class="c-fs20 c-fc-gray c-mt20">注：按月或按次申报纳税</div>
      </div>
      <div class="c-w100 c-pa c-p-b0 c-p-l0 c-hh88 c-bg-white c-flex-row c-flex-center c-ph30">
        <div @click="showFormula = false" class="c-fs22 c-fc-white theme-bg c-flex-row c-flex-center c-flex-grow1 c-hh64 c-br32">我知道了</div>
      </div>
    </cj-popup>
    <loading-status-tem :noData="loadingStatus == 'NO_DATA'" :noMoreData="loadingStatus == 'NO_MORE_DATA'" :noDataText="'暂无数据'" :showLoading="isLoading"></loading-status-tem>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js"
export default {
  name: 'TaxList',
  components: {
    loadingStatusTem
  },
  props: [],
  beforeCreate() {

  },
  created() {
    utilJs.appShare(this);
  },
  data() {
    return {
      showUploadInvoice: false,
      showFormula: false,
      invoiceList: [],
      isLoading: false,
      pageIndex: 1,
      loadingStatus: "NO_MORE_DATA",
      taxList: [],
      editStatus: 1, //1：上传发票 2：查看发票
      isEdit: false,
      currentIndex: 0
    }
  },
  mounted() {
    this.getTaxList();
  },
  computed: {
    showUploadBtn () {
      return this.invoiceList.length < 6 && (this.editStatus == 1 || (this.editStatus == 2 && this.isEdit))
    },
    showDeleteBtn () {
      return this.editStatus == 1 || (this.editStatus == 2 && this.isEdit)
    }
  },
  watch: {
  },
  methods: {
    clickUpload(tItem, index) {
      this.invoiceList = [];
      this.isEdit = false;
      if (tItem.invoiceNum > 0) {
        this.$loading.show();
        utilJs.getMethod(`${global.apiurl}members/getUserInvoiceListByMonth?month=${tItem.date}`, res => {
          this.invoiceList = res;
          this.$nextTick(() => {
            this.$loading.hide();
            this.editStatus = 2;
            this.currentIndex = index;
            this.showUploadInvoice = true;
          })
        }, failRes => {
          this.$loading.hide();
        })
      } else {
        this.editStatus = 1;
        this.currentIndex = index;
        this.showUploadInvoice = true;
      }
    },
    getTaxList() {
      if (!this.isLoading) {
        this.isLoading = true;
        utilJs.getMethod(global.apiurl + 'members/getUserInvoiceCount?page=' + this.pageIndex + '&limit=10', res => {
          this.isLoading = false;
          if (this.pageIndex == 1) {
            this.taxList = res.data;
          } else {
            this.taxList = [...this.taxList, ...res.data];
          }
          if (!res.next_page_url) {
            this.loadingStatus = this.pageIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.loadingStatus = 'HAS_MORE_DATA';
            this.pageIndex++;
          }
          this.isLoading = false;
        });
      }
    },
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(() => {
        if (that.loadingStatus == 'HAS_MORE_DATA') {
          that.getTaxList();
        }
      })
    },
    goInvoiceRule() {
      this.$routerGo(this, "push", { path: '/member/scholarship/invoiceRule' });
    },
    goWithdrawDetail(date) {
      this.$routerGo(this, "push", {
        path: `/member/scholarship/withdrawDetailList`,
        query: {date: date}
      })
    },
    async tapUpload() {
     let fileList = await utilJs.chooseLocalFile({multiple:true, max:6});
     let invoiceListArr = await utilJs.uploadImgListToOss(fileList);
     if (invoiceListArr && invoiceListArr.length) {
      let invoiceListTmp = [];
      for (let i = 0; i < invoiceListArr.length; i++) {
        invoiceListTmp.push({
          id: 0,
          invoiceUrl: invoiceListArr[i]
        })
      }
      this.invoiceList = [...this.invoiceList, ...invoiceListTmp].slice(0, 6)
     }
     console.log('invoiceList', this.invoiceList)
    },
    deleteInvoiceItem(invoiceIndex) {
      this.invoiceList.splice(invoiceIndex, 1);
    },
    toUpload() {
      if (this.invoiceList.length == 0) {
        this.$showCjToast({
          type: 'warn',
          text: '请上传发票',
        });
        return false;
      }
      this.upLoadList().then(res => {
        this.taxList[this.currentIndex].invoiceNum = this.invoiceList.length;
        this.showUploadInvoice = false;
        this.$showCjToast({
          type: 'success',
          text: '上传成功',
        });
      })
    },
    toClose() {
      this.showUploadInvoice = false;
    },
    toSave() {
      if (this.invoiceList.length == 0) {
        this.$showCjToast({
          type: 'warn',
          text: '请上传发票',
        });
        return false;
      }
      this.upLoadList().then(res => {
        this.taxList[this.currentIndex].invoiceNum = this.invoiceList.length;
        this.isEdit = false;
        this.$showCjToast({
          type: 'success',
          text: '修改成功',
        });
      })
    },
    upLoadList () {
      return new Promise((resolve, reject) => {
        utilJs.postMethod(`${global.apiurl}members/saveUserInvoiceListByMonth`, {month: this.taxList[this.currentIndex].date, invoiceList: this.invoiceList},
          res => {
            resolve(res);
          },
          failRes => {
            reject(failRes)
          }
        )
      })
    }
  },
  activated() {
    setDocumentTitle('预计个人所得税');// eslint-disable-line
    this.showUploadInvoice = false;
    this.showFormula = false;
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped  lang="scss">
.c-rotate45 {
  transform: rotate(45deg);
}
.img-item:not(:nth-child(3n)) {
  margin-right: calc((100% - 13.8rem) / 2);
}
.popup-slot-header {
  height: 2rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #f2f2f2;
  background: #fff;
  position: relative;
  .tit {
    color: #333333;
    font-size: 0.7rem;
    font-weight: bold;
  }
  .edit {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    font-size: 0.6rem;
    transform: translate(0, -50%);
  }
}
.tax-bg {
  background-image: linear-gradient(270deg, #FEF2EB 0%, #FCE9F6 100%);
}
.formula-list-bg {
  background: #ff5d3d33;
}
</style>
